<template>
  <div class="RoleEdit">
    <a-card>
      <a-form :form="form">
        <a-form-item label="角色信息" :colon="false" :label-col="{ span: 2 }" :wrapper-col="{ span: 8}"></a-form-item>
        <a-form-item label="角色名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 8}" help="不超过16个字">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'roleName',
          {rules: [{ required: true, message: '请输入角色名称!' }]}
        ]"
          />
        </a-form-item>
        <a-form-item label="启用状态" :label-col="{ span: 3 }" :wrapper-col="{ span: 8}">
          <a-switch
            v-decorator="['status', { valuePropName: 'checked',initialValue:true }]"
            checkedChildren="开"
            unCheckedChildren="关"
          />
        </a-form-item>
        <!-- <a-form-item label="权限设置" :label-col="{ span: 3 }" :wrapper-col="{ span: 8}">
          <a-checkbox
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
            :checked="checkAll"
            v-decorator="['authorization']"
          >全选</a-checkbox>
        </a-form-item>-->
      </a-form>
    </a-card>

    <!-- 订单管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminate"
          @change="onCheckAllChange"
          :checked="checkAll"
        >订单管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="plainOptions"
        v-model="checkedList"
        @change="onChange"
      />
    </a-card>

    <!-- 商品管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateGoods"
          @change="AllChangeGoods"
          :checked="checkAllGoods"
        >商品管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsGoods"
        v-model="checkedListGoods"
        @change="onChangeGoods"
      />
    </a-card>

    <!-- 库存管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateStock"
          @change="AllChangeStock"
          :checked="checkAllStock"
        >库存查询</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsStock"
        v-model="checkedListStock"
        @change="onChangeStock"
      />
    </a-card>

    <!-- 用户管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateUser"
          @change="AllChangeUser"
          :checked="checkAllUser"
        >用户管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsUser"
        v-model="checkedListUser"
        @change="onChangeUser"
      />
    </a-card>

    <!-- 代理商管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateAgent"
          @change="AllChangeAgent"
          :checked="checkAllAgent"
        >代理商管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsAgent"
        v-model="checkedListAgent"
        @change="onChangeAgent"
      />
    </a-card>

    <!-- 设备管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateDevice"
          @change="AllChangeDevice"
          :checked="checkAllDevice"
        >设备管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsDevice"
        v-model="checkedListDevice"
        @change="onChangeDevice"
      />
    </a-card>

    <!-- 数据分析 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateAnalyze"
          @change="AllChangeAnalyze"
          :checked="checkAllAnalyze"
        >数据分析</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsAnalyze"
        v-model="checkedListAnalyze"
        @change="onChangeAnalyze"
      />
    </a-card>

    <!-- 促销活动 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminatePromotion"
          @change="AllChangePromotion"
          :checked="checkAllPromotion"
        >促销活动</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsPromotion"
        v-model="checkedListPromotion"
        @change="onChangePromotion"
      />
    </a-card>

    <!-- 财务管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateFinance"
          @change="AllChangeFinance"
          :checked="checkAllFinance"
        >财务管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsFinance"
        v-model="checkedListFinance"
        @change="onChangeFinance"
      />
    </a-card>

    <!-- 货柜日志 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateLog"
          @change="AllChangeLog"
          :checked="checkAllLog"
        >货柜日志</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsLog"
        v-model="checkedListLog"
        @change="onChangeLog"
      />
    </a-card>

    <!-- 权限管理 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateAuthority"
          @change="AllChangeAuthority"
          :checked="checkAllAuthority"
        >权限管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsAuthority"
        v-model="checkedListAuthority"
        @change="onChangeAuthority"
      />
    </a-card>

    <!-- 用户反馈 -->
    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminateFeedback"
          @change="AllChangeFeedback"
          :checked="checkAllFeedback"
        >用户反馈</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="OptionsFeedback"
        v-model="checkedListFeedback"
        @change="onChangeFeedback"
      />
    </a-card>
    <a-button style="margin:2% 2% 2% 86%">取消</a-button>
    <a-button type="primary" @click="edit()">编辑</a-button>
  </div>
</template>

<script>
// 订单管理
const plainOptions = [
  { label: "销售订单", value: 0 },
  { label: "售后订单", value: 1 },
  { label: "异常订单", value: 2 }
];
const defaultCheckedList = [];

// 商品管理
const OptionsGoods = [
  { label: "总商品库", value: 3 },
  { label: "商品分类", value: 4 },
  { label: "算法识别码", value: 5 }
];
const defaultGoods = [];

// 库存管理
const OptionsStock = [{ label: "库存查询", value: 6 }];
const defaultStock = [];

// 用户管理
const OptionsUser = [{ label: "用户管理", value: 7 }];
const defaultUser = [];

// 代理商管理
const OptionsAgent = [{ label: "代理商管理", value: 8 }];
const defaultAgent = [];

// 设备管理
const OptionsDevice = [
  { label: "设备管理", value: 9 },
  { label: "报修设备", value: 10 },
  { label: "保活信息", value: 11 }
];
const defaultDevice = [];

// 数据分析
const OptionsAnalyze = [
  { label: "代理商销量", value: 12 },
  { label: "品类销量", value: 13 },
  { label: "用户分析", value: 14 }
];
const defaultAnalyze = [];

// 促销活动
const OptionsPromotion = [{ label: "促销活动", value: 15 }];
const defaultPromotion = [];

// 财务管理
const OptionsFinance = [
  { label: "余额管理", value: 16 },
  { label: "提现管理", value: 17 },
  { label: "账单管理", value: 18 }
];
const defaultFinance = [];

// 货柜日志
const OptionsLog = [{ label: "货柜日志", value: 19 }];
const defaultLog = [];

// 权限管理
const OptionsAuthority = [
  { label: "人员管理", value: 20 },
  { label: "角色管理", value: 21 }
];
const defaultAuthority = [];

// 用户反馈
const OptionsFeedback = [{ label: "用户反馈", value: 22 }];
const defaultFeedback = [];

export default {
  name: "RoleEdit",
  data() {
    return {
      form: this.$form.createForm(this),

      // 订单管理
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,

      // 商品管理
      checkedListGoods: defaultGoods,
      indeterminateGoods: true,
      checkAllGoods: false,
      OptionsGoods,

      // 库存管理
      checkedListStock: defaultStock,
      indeterminateStock: true,
      checkAllStock: false,
      OptionsStock,

      // 用户管理
      checkedListUser: defaultUser,
      indeterminateUser: true,
      checkAllUser: false,
      OptionsUser,

      // 代理商管理
      checkedListAgent: defaultAgent,
      indeterminateAgent: true,
      checkAllAgent: false,
      OptionsAgent,

      // 设备管理
      checkedListDevice: defaultDevice,
      indeterminateDevice: true,
      checkAllDevice: false,
      OptionsDevice,

      // 数据分析
      checkedListAnalyze: defaultAnalyze,
      indeterminateAnalyze: true,
      checkAllAnalyze: false,
      OptionsAnalyze,

      // 促销活动
      checkedListPromotion: defaultPromotion,
      indeterminatePromotion: true,
      checkAllPromotion: false,
      OptionsPromotion,

      // 财务管理
      checkedListFinance: defaultFinance,
      indeterminateFinance: true,
      checkAllFinance: false,
      OptionsFinance,

      // 货柜日志
      checkedListLog: defaultLog,
      indeterminateLog: true,
      checkAllLog: false,
      OptionsLog,

      // 权限管理
      checkedListAuthority: defaultAuthority,
      indeterminateAuthority: true,
      checkAllAuthority: false,
      OptionsAuthority,

      // 用户反馈
      checkedListFeedback: defaultFeedback,
      indeterminateFeedback: true,
      checkAllFeedback: false,
      OptionsFeedback
    };
  },
  methods: {
    // 订单管理
    onChange(checkedList) {
      console.log(checkedList);
      this.indeterminate =
        !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      // console.log(e.target.checked);
      let plainOption = [];
      if (e.target.checked) {
        plainOption = plainOptions.map(item => item.value);
      }
      Object.assign(this, {
        checkedList: e.target.checked ? plainOption : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
    },

    // 商品管理
    onChangeGoods(checkedListGoods) {
      console.log(checkedListGoods);
      this.indeterminateGoods =
        !!checkedListGoods.length &&
        checkedListGoods.length < OptionsGoods.length;
      this.checkAllGoods = checkedListGoods.length === OptionsGoods.length;
    },
    AllChangeGoods(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsGoods.map(item => item.value);
      }
      Object.assign(this, {
        checkedListGoods: e.target.checked ? OptionsGood : [],
        indeterminateGoods: false,
        checkAllGoods: e.target.checked
      });
    },

    // 库存管理
    onChangeStock(checkedListStock) {
      console.log(checkedListStock);
      this.indeterminateStock =
        !!checkedListStock.length &&
        checkedListStock.length < OptionsStock.length;
      this.checkAllStock = checkedListStock.length === OptionsStock.length;
    },
    AllChangeStock(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsStock.map(item => item.value);
      }
      Object.assign(this, {
        checkedListStock: e.target.checked ? OptionsGood : [],
        indeterminateStock: false,
        checkAllStock: e.target.checked
      });
    },

    // 用户管理
    onChangeUser(checkedListUser) {
      console.log(checkedListUser);
      this.indeterminateUser =
        !!checkedListUser.length && checkedListUser.length < OptionsUser.length;
      this.checkAllUser = checkedListUser.length === OptionsUser.length;
    },
    AllChangeUser(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsUser.map(item => item.value);
      }
      Object.assign(this, {
        checkedListUser: e.target.checked ? OptionsGood : [],
        indeterminateUser: false,
        checkAllUser: e.target.checked
      });
    },

    // 代理商管理
    onChangeAgent(checkedListAgent) {
      console.log(checkedListAgent);
      this.indeterminateAgent =
        !!checkedListAgent.length &&
        checkedListAgent.length < OptionsAgent.length;
      this.checkAllAgent = checkedListAgent.length === OptionsAgent.length;
    },
    AllChangeAgent(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsAgent.map(item => item.value);
      }
      Object.assign(this, {
        checkedListAgent: e.target.checked ? OptionsGood : [],
        indeterminateAgent: false,
        checkAllAgent: e.target.checked
      });
    },

    // 设备管理
    onChangeDevice(checkedListDevice) {
      console.log(checkedListDevice);
      this.indeterminateDevice =
        !!checkedListDevice.length &&
        checkedListDevice.length < OptionsDevice.length;
      this.checkAllDevice = checkedListDevice.length === OptionsDevice.length;
    },
    AllChangeDevice(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsDevice.map(item => item.value);
      }
      Object.assign(this, {
        checkedListDevice: e.target.checked ? OptionsGood : [],
        indeterminateDevice: false,
        checkAllDevice: e.target.checked
      });
    },

    // 数据分析
    onChangeAnalyze(checkedListAnalyze) {
      console.log(checkedListAnalyze);
      this.indeterminateAnalyze =
        !!checkedListAnalyze.length &&
        checkedListAnalyze.length < OptionsAnalyze.length;
      this.checkAllAnalyze =
        checkedListAnalyze.length === OptionsAnalyze.length;
    },
    AllChangeAnalyze(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsAnalyze.map(item => item.value);
      }
      Object.assign(this, {
        checkedListAnalyze: e.target.checked ? OptionsGood : [],
        indeterminateAnalyze: false,
        checkAllAnalyze: e.target.checked
      });
    },

    // 促销活动
    onChangePromotion(checkedListPromotion) {
      console.log(checkedListPromotion);
      this.indeterminatePromotion =
        !!checkedListPromotion.length &&
        checkedListPromotion.length < OptionsPromotion.length;
      this.checkAllPromotion =
        checkedListPromotion.length === OptionsPromotion.length;
    },
    AllChangePromotion(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsPromotion.map(item => item.value);
      }
      Object.assign(this, {
        checkedListPromotion: e.target.checked ? OptionsGood : [],
        indeterminatePromotion: false,
        checkAllPromotion: e.target.checked
      });
    },

    // 财务管理
    onChangeFinance(checkedListFinance) {
      console.log(checkedListFinance);
      this.indeterminateFinance =
        !!checkedListFinance.length &&
        checkedListFinance.length < OptionsFinance.length;
      this.checkAllFinance =
        checkedListFinance.length === OptionsFinance.length;
    },
    AllChangeFinance(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsFinance.map(item => item.value);
      }
      Object.assign(this, {
        checkedListFinance: e.target.checked ? OptionsGood : [],
        indeterminateFinance: false,
        checkAllFinance: e.target.checked
      });
    },

    // 货柜日志
    onChangeLog(checkedListLog) {
      console.log(checkedListLog);
      this.indeterminateLog =
        !!checkedListLog.length && checkedListLog.length < OptionsLog.length;
      this.checkAllLog = checkedListLog.length === OptionsLog.length;
    },
    AllChangeLog(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsLog.map(item => item.value);
      }
      Object.assign(this, {
        checkedListLog: e.target.checked ? OptionsGood : [],
        indeterminateLog: false,
        checkAllLog: e.target.checked
      });
    },

    // 权限管理
    onChangeAuthority(checkedListAuthority) {
      console.log(checkedListAuthority);
      this.indeterminateAuthority =
        !!checkedListAuthority.length &&
        checkedListAuthority.length < OptionsAuthority.length;
      this.checkAllAuthority =
        checkedListAuthority.length === OptionsAuthority.length;
    },
    AllChangeAuthority(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsAuthority.map(item => item.value);
      }
      Object.assign(this, {
        checkedListAuthority: e.target.checked ? OptionsGood : [],
        indeterminateAuthority: false,
        checkAllAuthority: e.target.checked
      });
    },

    // 用户反馈
    onChangeFeedback(checkedListFeedback) {
      console.log(checkedListFeedback);
      this.indeterminateFeedback =
        !!checkedListFeedback.length &&
        checkedListFeedback.length < OptionsFeedback.length;
      this.checkAllFeedback =
        checkedListFeedback.length === OptionsFeedback.length;
    },
    AllChangeFeedback(e) {
      console.log(e.target.checked);
      let OptionsGood = [];
      if (e.target.checked) {
        OptionsGood = OptionsFeedback.map(item => item.value);
      }
      Object.assign(this, {
        checkedListFeedback: e.target.checked ? OptionsGood : [],
        indeterminateFeedback: false,
        checkAllFeedback: e.target.checked
      });
    },

    // 角色详情接口
    detail() {
      this.axios
        .post(this.baseUrl + "/authority/detail", {
          loginToken: this.$store.state.loginToken,
          authorityId: this.$store.state.authorityId
        })
        .then(response => {
          console.log(response);
          this.form.setFieldsValue({
            roleName: response.data.data.designation,
            status: response.data.data.status
          });
          //   this.checkedList+this.checkedListGoods = response.data.data.pageIds;
        });
    },

    // 编辑角色接口
    edit() {
      var values = this.form.getFieldsValue();
      var pageIds = `${this.checkedList},${this.checkedListGoods},${
        this.checkedListStock
      },${this.checkedListUser},${this.checkedListAgent},${
        this.checkedListDevice
      },${this.checkedListAnalyze},${this.checkedListPromotion},${
        this.checkedListFinance
      },${this.checkedListLog},${this.checkedListAuthority},${
        this.checkedListFeedback
      }`;
      this.axios
        .post(this.baseUrl + "/authority/edit", {
          loginToken: this.$store.state.loginToken,
          authorityId: this.$store.state.authorityId,
          designation: values.roleName,
          pageIds: pageIds,
          status: values.status
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$message.info("编辑成功");
            this.$router.push({
              path: "/home/accessadmin/roleadmin"
            });
          }
        });
    }
  },
  created() {
    this.detail();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.RoleEdit {
  width: 100%;
}
.checkTitle {
  margin: 0 0 0 2%;
  font-size: 1em;
}
.checkGroup {
  margin: 0 0 0 5%;
  width: 100%;
}
.hint {
  font-size: 0.9em;
  color: gray;
}
.checkboxTitel {
  font-size: 1.1em;
}
</style>
